As you create a table, you can select various options for its size and appearance. To open the Insert Table dialog box, select Insert from the Table menu and choose Table.
Rows
Specifies the number of rows in the table. The resulting table does not include an extra row for column headings. Each <TR> tag creates a single table row and each <TD> tag creates a single cell in the row. For example, if you enter 1 in the Row field, 1 in the Column field, and accept the other default values in the dialog box, the following code is inserted:
<TABLE cellSpacing=1 cellPadding=1 width=300 border=1>
<TR><TD></TD></TR>
</TABLE>Columns
Specifies the number of columns. Each <TD> tag creates a single cell in a particular row.
Width
Indicates the total width of the table. Select units (pixels or percent) from the list next to this box. If you select pixels, you can set an absolute width for the table. The table and its columns will remain the same width regardless of screen resolution. The default width for a new table is 300 pixels. If you select percent, the width of the table will change to accommodate screen resolution. A table whose width value is 25 percent will always be one-quarter the width of the available screen. If you leave this field blank, the table's width will be based on its content.
Height
Indicates the total height of the table in pixels. If you enter a height value, a height value is added to the opening <TABLE> tag. For example, if you set the height value to 20 and accept the remaining default values, the opening <TABLE> tag would be: <TABLE height=20 cellSpacing=1 cellPadding=1 width=300 border=1>
If you leave this field blank, the table's height will be based on its content.
Background color
Specifies the background color for the table. Select a color name from the list. If you select blue, for example, the bgColor=blue attribute is added to the opening <TABLE> tag. You can also click the adjacent ellipse (...) button to display the Color Picker and use it to choose additional colors.
Note A background color value for an particular cell takes precedence over the background color value for the table.
Background image
Specifies a graphics file (.gif, .jpg, or .jpeg) that appears behind the table.
Note To enable a background image to display behind a table, you must select an HTML 4.0 targetSchema.
The image is displayed at its default size. If the table is smaller than the image, part of the image is cropped. If the table is larger than the image, the image tiles to fill the table background. Enter a path, or click the adjacent ellipse (...) button to open the Select Table Background Image dialog box and navigate to the image file. If, for example, you select an image named "background.jpg" that is in the Images subfolder, the following is added to the opening <TABLE> tag: background="//Images/background.jpg"
Note If you reference an image file that is not already part of your project, the image will not automatically be added to your project. You must manually add the file to the project using the Add Existing Solution Item dialog box.
Alignment
Specifies how the table is aligned with respect to the document margins. Table layout alignment attributes take precedence over more general alignment attributes. For example, if a table, which is assigned the left alignment attribute, is inserted within a <CENTER> tag, the table is aligned to the left margin rather than centered.
| Option | Alignment |
|---|---|
| Center | Aligns equidistant from the left and right margins. Adds align=center to the opening <TABLE> tag. |
| Left | Aligns with the left margin. Adds align=left to the opening <TABLE> tag. |
| Right | Aligns with the right margin. Adds align=right to the opening <TABLE> tag. |
Cell spacing
Specifies the amount of space in pixels between cells. The default value, which is 1, adds cellSpacing=1 to the opening <TABLE> tag.
Cell padding
Specifies the amount of space in pixels between cell contents and the cell border. The default value, which is 1, adds cellPadding=1 to the opening <TABLE> tag.
Border size
Specifies the size in pixels of the table border. Choose 0 to specify no border. The default value, which is 1, adds border=1 to the opening <TABLE> tag.
Border color
Specifies a color for the table's border. Select a color name from the list or press the browse to a color in the Color Picker dialog box. If the table has no border, border color is ignored.
Note To enable border color, highlight, and shadow, you must set the targetSchema to HTML 4.0.
Highlight color
Specifies the color for the bottom and right sides of the table cell. Select a color name from the list or click the adjacent browse (...) button to display the Color Picker and choose additional colors. For example, if you select lime, the following is added to the opening <TABLE> tag: borderColorLight=lime. If the table has no border, highlight color is ignored.
Shadow color
Specifies a color for the table's shadow. Select a color name from the list or click the adjacent browse (...) button to display the Color Picker and choose additional colors. For example, if you select aqua, the following is added to the opening <TABLE> tag: borderColorDark=aqua. If the table has no border, shadow color is ignored.
Background color
Specifies the background color for all cells in a table. To change or remove the background color for a single cell, place the insertion point in the cell in Design View, and select Property Pages from the View menu. In the <TD> Property Pages dialog box, change the value in the Background Color field. You can select a color name from the popup list or click the adjacent browse (...) button to display the Color Picker and choose additional colors. For example, if you select blue, the following is added to the opening <TABLE> tag: bgColor=blue.
Alignment
Specifies how the text in a cell is aligned with its border. After the table has been created, you can change or remove the alignment option for individual cells by placing the cursor in a cell and changing the value in the Horizontal or Vertical Alignment fields in the Cell Property Pages. The default value is left. When you specify an alignment option, the appropriate value is added within each <TD> tag.
| Option | Alignment |
|---|---|
| Center | Cell contents are centered horizontally in the cell. Adds align=middle to <TD></TD> tag. |
| Left | Cell contents are flush with the left border. Adds align=left to <TD></TD> tag. |
| Right | Cell contents are flush with the right border. Adds align=right to <TD></TD> tag. |
Border color
Specifies the same color for the borders of all cells in the table. The cell border color takes precedence over the table border color. After you create a table, you can change or remove the border color for each cell individually by placing the cursor in a cell and selecting Property Pages from the View menu, which opens the <TD> Property Pages dialog box. The new values set in <TD> Property Pages are inserted into the markup for the selected cell.
Note To enable border color, you must set the targetSchema to HTML 4.0.
Wrap text
Specifies whether text in cells is wrapped within the cell's borders. If cleared, all text in each cell appears on the same line and noWrap is added within each <TD></TD> tag. If selected, the browser automatically wraps text in each cell. After the table has been created, you can change or remove the wrap option for each cell individually.